import React, { useState, useEffect } from 'react';
import { motion } from 'motion/react';

interface DigitalHumanProps {
  emotion?: 'neutral' | 'listening' | 'thinking' | 'concerned' | 'happy';
  size?: 'small' | 'medium' | 'large';
  isListening?: boolean;
  isSpeaking?: boolean;
}

export function DigitalHuman({ 
  emotion = 'neutral', 
  size = 'medium', 
  isListening = false,
  isSpeaking = false 
}: DigitalHumanProps) {
  const [eyeBlink, setEyeBlink] = useState(false);

  // 眨眼动画
  useEffect(() => {
    const blinkInterval = setInterval(() => {
      setEyeBlink(true);
      setTimeout(() => setEyeBlink(false), 150);
    }, 3000 + Math.random() * 2000);

    return () => clearInterval(blinkInterval);
  }, []);

  const sizeClasses = {
    small: 'w-24 h-24',
    medium: 'w-32 h-32',
    large: 'w-48 h-48'
  };

  const getEmotionColors = () => {
    switch (emotion) {
      case 'listening':
        return { face: '#E0F2FE', accent: '#0EA5E9' };
      case 'thinking':
        return { face: '#F3F4F6', accent: '#6B7280' };
      case 'concerned':
        return { face: '#FEF3C7', accent: '#F59E0B' };
      case 'happy':
        return { face: '#ECFDF5', accent: '#10B981' };
      default:
        return { face: '#EFF6FF', accent: '#3B82F6' };
    }
  };

  const colors = getEmotionColors();

  return (
    <div className={`relative ${sizeClasses[size]} mx-auto`}>
      <motion.div
        className="relative w-full h-full"
        animate={{ 
          y: isSpeaking ? [-2, 2, -2] : [0, -1, 0],
        }}
        transition={{ 
          duration: isSpeaking ? 0.5 : 3,
          repeat: Infinity,
          ease: "easeInOut"
        }}
      >
        {/* 外圈光晕效果 */}
        <motion.div
          className="absolute inset-0 rounded-full blur-xl opacity-30"
          style={{ backgroundColor: colors.accent }}
          animate={{ 
            scale: isListening ? [1, 1.2, 1] : 1,
          }}
          transition={{ 
            duration: 2,
            repeat: isListening ? Infinity : 0,
            ease: "easeInOut"
          }}
        />

        {/* 主要脸部 */}
        <div 
          className="relative w-full h-full rounded-full border-4 shadow-lg overflow-hidden"
          style={{ 
            backgroundColor: colors.face,
            borderColor: colors.accent
          }}
        >
          {/* 眼睛 */}
          <div className="absolute top-8 left-1/2 transform -translate-x-1/2 flex space-x-3">
            <motion.div
              className="w-3 h-3 bg-gray-800 rounded-full"
              animate={{ 
                scaleY: eyeBlink ? 0.1 : 1,
                y: emotion === 'concerned' ? -1 : 0
              }}
              transition={{ duration: 0.1 }}
            />
            <motion.div
              className="w-3 h-3 bg-gray-800 rounded-full"
              animate={{ 
                scaleY: eyeBlink ? 0.1 : 1,
                y: emotion === 'concerned' ? -1 : 0
              }}
              transition={{ duration: 0.1 }}
            />
          </div>

          {/* 嘴巴 */}
          <motion.div
            className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
            animate={{ 
              scaleY: isSpeaking ? [1, 0.8, 1.2, 1] : 1,
            }}
            transition={{ 
              duration: isSpeaking ? 0.3 : 0,
              repeat: isSpeaking ? Infinity : 0
            }}
          >
            {emotion === 'happy' ? (
              <div 
                className="w-6 h-3 border-b-2 border-gray-700 rounded-b-full"
                style={{ borderBottomColor: colors.accent }}
              />
            ) : emotion === 'concerned' ? (
              <div 
                className="w-6 h-3 border-t-2 border-gray-700 rounded-t-full"
                style={{ borderTopColor: '#F59E0B' }}
              />
            ) : (
              <div className="w-4 h-2 bg-gray-600 rounded-full" />
            )}
          </motion.div>

          {/* 麦克风图标（听取状态） */}
          {isListening && (
            <motion.div
              className="absolute bottom-2 right-2 w-4 h-4 rounded-full flex items-center justify-center"
              style={{ backgroundColor: colors.accent }}
              animate={{ opacity: [0.5, 1, 0.5] }}
              transition={{ duration: 1, repeat: Infinity }}
            >
              <svg className="w-2 h-2 text-white fill-current" viewBox="0 0 24 24">
                <path d="M12 2C10.3 2 9 3.3 9 5v6c0 1.7 1.3 3 3 3s3-1.3 3-3V5c0-1.7-1.3-3-3-3zm1 13.9c2.9-.4 5-2.9 5-5.9h-2c0 1.7-1.3 3-3 3s-3-1.3-3-3H8c0 3 2.1 5.5 5 5.9V18h-2v2h6v-2h-2v-2.1z"/>
              </svg>
            </motion.div>
          )}
        </div>

        {/* 医疗十字标识 */}
        <div 
          className="absolute -bottom-2 -right-2 w-6 h-6 rounded-full flex items-center justify-center shadow-md"
          style={{ backgroundColor: colors.accent }}
        >
          <svg className="w-3 h-3 text-white fill-current" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
          </svg>
        </div>
      </motion.div>
    </div>
  );
}